<template>
  <el-button
    v-if="!show"
    @click="show = true"
  >
    查看
  </el-button>
  <el-dialog
    title="数据查看"
    :visible.sync="show"
    v-else
  >
    <span
      slot="title"
    >
      <el-button-group>
        <el-button
          type="success"
          @click="highlight = !highlight"
        >修改</el-button>
      </el-button-group>
    </span>
    <ym-highlight
      :code="output"
      v-if="highlight"
    />
    <el-input
      v-else
      v-model="output"
      type="textarea"
      rows="24"
    />
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="primary"
        @click="show = false"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import YmHighlight from '../components/YmHighlight'
export default {
  props: {
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      show: false,
      highlight: true
    }
  },
  computed: {
    output: {
      get () {
        return JSON.stringify(this.value, null, 2)
      },
      set (v) {
        this.$emit('change', JSON.parse(v))
      }
    }
  },
  components: {
    YmHighlight
  }
}
</script>

<style scoped>

</style>
